<template>
<div>
<div class="title">热门推荐</div>
<ul>
    <li class="item border-bottom" v-for=" item of list" :key="item.id">
             <img class="item-img" :src="item.imgUrl" alt="">
        <div class="item-info">
           <p class="item-title">{{item.name}}</p>
           <p class="item-desc">{{item.address}}</p>
           <button class="item-button">查看详情</button>
        </div>
    </li>
</ul>
</div>

</template>
<script>
export default{
    name:'HomeRecommend',
    props:{
        list:Array
    }
}

</script>
<style lang="stylus" scoped>
 @import '~styles/mixins.styl'
 .title
   margin-top:.2rem
   line-height:0.8rem
   background:#eee
   text-indent:.2rem
 .item
   overflow:hidden
   display:flex
   height 1.9rem
   .item-img
     width:1.7rem
     height 1.7rem
     padding :.1rem
   .item-info
     flex:1
     padding 0.1rem
     min-width:0
     .item-title
       line-light:.54rem
       font-size:.32rem
       ellipsis()
     .item-desc
       line-height:.4rem
       color:#ccc
       ellipsis()
     .item-button
       margin-top:.16rem
       background #ff9300
       padding :0.2rem
       border-radius:.06rem
       color:#fff
       line-height:.44rem


   
</style>
